{% extends "layout/base.html" %}
{% block title %} Boutique {% endblock %}

{% block content %}
{% include 'layout/header.html' %}
{% include 'layout/infosBox.html' %}
    <div id="content" class="{{theme.color3}}">
        <div id="boutique">
        <form id="boutiqueForm" method="get" action="./boutique.php" class="form">
            {% set selected = "selected" %}
            <div class="form-elem left">
                <h5>Date :</h5>
                <input id="date" type="date" name="date" value="{{date_get}}" placeholder="1900-01-01 (date désirée)" required />
            </div>
            <div class="form-elem left">
                <h5>Catégories :</h5>
                <select id="tri_categories" class="selectpicker" multiple title="Choisissez des catégories" name="categories[]">
                    {% for categorie in categories %}
                        {% set selected = "" %}
                        {% for categorie_get in categories_get %}
                            {% if categorie_get == categorie.id_categorie %}
                                {% set selected = "selected" %}
                            {% endif %}
                        {% endfor %}
                        <option value="{{categorie.id_categorie}}" {{selected}} >{{categorie.name}}</option>
                    {% endfor %}
                    {% set selected = "selected" %}
                </select>
            </div>
            <div class="form-elem left">
                <h5>Réccurence :</h5>
                    {% if reccurence_get is null %}
                        {% set checked = "checked" %}
                    {% endif %}
                        <label for="allTypes" class="radio">
                            <input id="allTypes" type="radio" {{checked}} name="reccurence" value="all" /><span>Tous types</span>
                        </label>
                    {% set checked = "" %}
                    {% if reccurence_get == "none" %}
                        {% set checked = "checked" %}
                    {% endif %}
                        <label for="none" class="radio">
                            <input id="none" type="radio" {{checked}} name="reccurence" value="none" /><span>Ponctuelle</span>
                        </label>
                    {% set checked = "" %}
                    {% if reccurence_get == "daily" %}
                        {% set checked = "checked" %}
                    {% endif %}
                        <label for="daily" class="radio">
                            <input id="daily" type="radio" {{checked}} name="reccurence" value="daily" /> Quotidienne
                        </label>
                    {% set checked = "" %}
                    {% if reccurence_get == "weekly" %}
                        {% set checked = "checked" %}
                    {% endif %}
                        <label for="weekly" class="radio">
                            <input id="weekly" type="radio" {{checked}} name="reccurence" value="weekly" /> Hebdomadaire
                        </label>
                    {% set checked = "" %}
                    {% if reccurence_get == "monthly" %}
                        {% set checked = "checked" %}
                    {% endif %}
                        <label for="monthly" class="radio">
                            <input id="monthly" type="radio" {{checked}} name="reccurence" value="monthly" /> Mensuelle
                        </label>
                    {% set checked = "" %}
                    {% if reccurence_get == "yearly" %}
                        {% set checked = "checked" %}
                    {% endif %}
                        <label for="yearly" class="radio">
                            <input id="yearly" type="radio" {{checked}} name="reccurence" value="yearly" /> Annuelle
                        </label>
                    {% set checked = "" %}
            </div>
            <div class="form-elem left">
                <h5>Ordonner les résultats :</h5>
                <select id="orderBy" class="selectpicker" name="orderby">
                    <option value="">Trier</option>                      
                    <option value="price_c" {% if orderby_get == 'price_c' %} {{selected}} {% endif %}>Prix croissant</option>
                    <option value="price_d" {% if orderby_get == 'price_d' %} {{selected}} {% endif %}>Prix décroissant</option>
                    <option value="time_c" {% if orderby_get == 'time_c' %} {{selected}} {% endif %}>durée croissante</option>
                    <option value="time_d" {% if orderby_get == 'time_d' %} {{selected}} {% endif %}>durée décroissante</option>
                </select>
            </div>
            <div class="form-elem left">
                <h5>Recherche :</h5>
                <input id="boutiqueSearch" name="keyword" type="text" value="{{keyword_get}}" placeholder="Rechercher (Patoche ou bricolage par exemple)" />
            </div>
            <div class="form-elem clr">
                <input type="submit" name="search" value="Rechercher" id="bt_submit" class="clr btn btn-primary {{theme.color1}}" />
            </div>
        </form>
        </div>
        <div class="clr"></div>
    <h4>Les temps recherchés à vendre</h4>
	{% include 'layout/result.html' %}
    {% include 'layout/module.html' %}
    </div>
    {% include 'layout/footer.html' %}
    <script type="text/javascript" >
        // Gestion du formulaire avec Validate et AJAX.
        $(document).ready(function(){
            $('#boutiqueForm').validate({
                rules: {
                    date: {
                        date: true,
                        required: true
                    }
                },
                messages: {
                    date: {
                        date: "Le format de date doit être aaaa-mm-jj.",
                        required: "Veuillez rentrer une date pour faire une recherche svp."
                    },
                }
            });
            $("#boutiqueForm").on('submit', function(e){
                var isvalidate = $("#boutiqueForm").valid();
                if(isvalidate){
                    e.preventDefault();
                    var datetime = $('#date').val();
                    var cat =  $('#tri_categories').val();
                    var reccur = $('input[type="radio"]:checked').val();
                    var orderBy = $('#orderBy').val();
                    var key = $('#boutiqueSearch').val();
                    var color1 = '{{theme.color1}}';

                    console.log(reccur);

                    $.ajax({
                        type : "GET",
                        url : "http://timeshop.alwaysdata.net/boutique_ajax.php",
                        data :{
                            date:datetime,
                            categories:cat,
                            reccurence:reccur,
                            orderby:orderBy,
                            keyword:key
                        },
                        dataType : "json",

                        success: function(data){
                            tabresults ='<table class="table table-hover"><thead><tr><th>Prénom</th><th>Nom</th><th>Jour / Date</th><th>Durée</th><th>Réccurence</th><th>Prix (€)</th><th>Ajouter le produit au panier</th></tr></thead><tbody>';
                            $.each(data, function(index){
                                tabresults +='<tr>';
                                tabresults +='<td><a href="./profil.php?id='+data[index].id_user+'">'+data[index].firstname+'</a></td>';
                                tabresults +='<td><a href="./profil.php?id='+data[index].id_user+'">'+data[index].lastname+'</a></td>';
                                if(data[index].daily == 1){
                                    tabresults +='<td>tous les jours</td>';
                                }
                                else if(data[index].weekly == 1){
                                    tabresults +='<td>tous les '+data[index].dayweek+'</td>';
                                }
                                else if(data[index].monthly == 1){
                                    tabresults +='<td>tous les '+data[index].daymonth+'</td>';
                                }
                                else if(data[index].yearly == 1){
                                    tabresults +='<td>tous les '+data[index].dayyear+'</td>';
                                }else{
                                    tabresults +='<td>'+data[index].date_begin+'</td>';
                                }
                                tabresults +='<td>'+data[index].duration+'</td>';
                                if(data[index].daily == 1){
                                    tabresults +='<td>quotienne</td>';
                                }
                                else if(data[index].weekly == 1){
                                    tabresults +='<td>hebdomadaire</td>';
                                }
                                else if(data[index].monthly == 1){
                                    tabresults +='<td>mensuelle</td>';
                                }
                                else if(data[index].yearly == 1){
                                    tabresults +='<td>annuelle</td>';
                                }
                                else{
                                    tabresults +='<td>ponctuelle</td>';
                                }
                                tabresults +='<td>'+data[index].price+'</td>';
                                tabresults +='<td><form method="post" id="ajoutPanier" class="ajoutPanier" action="panier.php" class="form-elem"><input type="hidden" name="id_user" value="'+data[index].id_user+'" /><input type="hidden" name="firstname" value="'+data[index].firstname+'" /><input type="hidden" name="lastname" value="'+data[index].lastname+'" /><input type="hidden" name="duration" value="'+data[index].duration+'" /><input type="hidden" name="id_availability" value="'+data[index].id_availability+'" /><input type="hidden" name="price" value="'+data[index].price+'" /><select class="selectpicker '+color1+'" data-style="'+color1+'" name="categorie"><option value="">Catégories</option>';
                                    $.each(data[index].categories, function(key){
                                        tabresults +='<option value="'+data[index].categories[key].name+'">'+data[index].categories[key].name+'</option>';
                                    });
                                    tabresults +='</select><select class="selectpicker '+color1+'" data-style="'+color1+'" name="dates"><option value="">Dates</option>';
                                    $.each(data[index].datesChoice.dates, function(key){
                                        tabresults +='<option value="'+data[index].datesChoice.dates[key]+'">'+data[index].datesChoice.dates[key]+'</option>';
                                    });
                                tabresults +='</select><input type="submit" name="ajouterPanier" value="" class="btnPanier" /></form></td>';
                                tabresults +='</tr>';
                            });
                            tabresults +='</tbody></table>';
                            if (data=='') {tabresults="Aucun résultat n'a été trouvé."}
                            $('#results').html(tabresults);
                            $('select').selectpicker();
                        },

                        beforeSend: function () {
                            $("#results").html('Requête en cours...</br><img src="{{MEDIA_PATH}}img/load.gif" />');
                        },

                        error: function (xhr, ajaxOptions, thrownError) {
                            $("#results").html('Il y a eu une erreur, n\'hésitez pas à transmettre l\'erreur à l\'équipe de Timeshop. Merci de votre compréhension.</br>Erreur :'+xhr.status+' : '+thrownError+'');
                        }
                    });
                }
            });
        });
    </script>
{% endblock %}